<!--
 * @Author: 哈兰德
 * @Description: 右侧属性面板的框架封装
-->
<template>
  <div class="editor-panel">
    <div class="editor-header">
      {{ title }}
    </div>
    <div class="editor-body" :style="{height:editorHeight}">
      <slot></slot>
    </div>
  </div>
</template>

<script>
 
export default {
  props: {
    title:{
      type: String,
      default:null
    }
  },
  data () {
    return { 
      editorHeight:0
    }
  },
  mounted () {
    let h = document.body.clientHeight
    this.editorHeight=h - 130 + 'px'
  }

}
</script>

<style lang="less" scoped>
.editor-panel{
  margin-top: 10px;
  width: 360px;
  margin-right: 3px;
.editor-header{
    padding: 10px;
    background: #f5f7fa;
  }
  .editor-body{
      font-size: 16px;
      background: #fff;
      padding: 10px;
      overflow: auto; 
      overflow-x:hidden ;
  }

    .editor-body::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 3px;
    // background-color: #ccc;
  }

  .editor-body::-webkit-scrollbar-thumb {
    background: #ccc;
  }
}
</style>
